<template>
  <div class="home">
    <div class="" @click="change">切换</div>
    <pinch-zoom v-show="status" :autoHeight=true :limitPan=true>
      <img src="../assets/test.jpg">
      <div class="map-point">
        <div class="u-point u-point-1" @click="test(1)">南朗</div>
        <div class="u-point u-point-2" @click="test(2)">南朗啊啊啊啊</div>
        <div class="u-point u-point-3">南朗哈哈哈哈</div>
        <router-link class="u-point u-point-3" to="/about">南朗哈哈哈哈</router-link>
      </div>
    </pinch-zoom>
    
    <pinch-zoom v-show="!status">
      <img src="../assets/test.jpg">
      <div class="map-point">
        <div class="u-point u-point-1" @click="test(1)">南朗22</div>
        <div class="u-point u-point-2" @click="test(2)">南朗啊啊啊啊22</div>
        <div class="u-point u-point-3" @click="test(3)">南朗哈哈哈哈22</div>
      </div>
    </pinch-zoom>
  </div>
</template>

<script>
// @ is an alias to /src
import Vue from 'vue'
import PinchZoom from 'vue-pinch-zoom';
Vue.component('pinch-zoom', PinchZoom);
export default {
  name: 'Home',
  data() {
    return {
      status: true
    }
  },
  methods: {
    test(value) {
      alert(value)
    },
    change() {
      this.status = !this.status
    }
  }
}
</script>

<style>
.pinch-zoom-wrapper {
  background: none !important;
}
.pinch-zoom-content {
  position: relative;
}
.u-point {
  position: absolute;
  background: #f00;
  color: #fff;
  font-size: 1rem;
}
.u-point-1 {
  top: 10px;
  left: 20px;
}
.u-point-2 {
  top: 40px;
  left: 40px;
}
.u-point-3 {
  top: 70px;
  left: 40px;
}
</style>
